<template>
  <div>
    <van-nav-bar
      fixed
      title="订单详情"
      left-arrow
      class="bg-primary color-white"
      @click-left="$utils.back($route.path)"
    />
    <div class="has-top">
      <div class="head-bg-box bg-primary" />
      <!-- 背景 -->
      <div class="page-content-box mlr-25 ">
        <div class="color-white mt-40 mlr-30">
          <p class="fs-36 fw-b lh-xxs">{{ Model.StateName }}</p>
          <img v-show="stateIcon" :src="stateIcon" alt="" srcset="" class="stateIcon">
        </div>
        <div class="mt-40" style="position:relative;z-index:1;">
          <div class="bg-white br-10 flex-v-c ptb-25">
            <svg-icon icon-class="location-1" class="fs-54 color-primary mlr-20 flex-s-0" />
            <div class="flex-1">
              <p class="fs-30">
                <span class="mr-20">{{ Model.ContactName }}</span>
                <span>{{ Model.ContactTel }}</span>
              </p>
              <p>{{ Model.ProvinceName }}{{ Model.CityName }}{{ Model.AreaName }}{{ Model.StreetName }}{{ Model.ContactAddress }}</p>
            </div>
            <span v-show="Model.State === 3 || Model.State === 5" class="btn flex-s-0 bg-second" @click="showWuliu(Model.State)">物流信息</span>
          </div>
          <div class="mt-20 br-12">
            <productList :product-list="detailList" list-type="orderDetail" />
          </div>
          <div class="mt-20 br-12 bg-white ">
            <p class="flex-s-c fs-28 lh-76 plr-25">
              <span>商品</span>
              <span>￥{{ totalPrice }}</span>
            </p>
            <!-- <p class="flex-s-c fs-28 lh-76 plr-25">
              <span>优惠</span>
              <span>￥5930.32</span>
            </p>
            <p class="flex-s-c fs-28 lh-76 plr-25">
              <span>运费</span>
              <span>￥5930.32</span>
            </p> -->
            <p class="fs-30 ht tar lh-110 plr-25">实际支付:<span class="color-primary fw-b">￥{{ totalPay }}</span></p>
          </div>
          <div class="mt-20 br-12 bg-white plr-25 pb-5">
            <p class="pt-18 pl-15 lh-lg left-line">订单信息</p>
            <div v-for="(item,index) in orderList" :key="index" class="flex fs-28 mtb-24 lh-xxs">
              <p class="color-gray-light pr-20 list-title">{{ item.title }}:</p>
              <p class>{{ item.value }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情弹窗 -->
      <van-popup v-model="expressShow" position="bottom" class="full-width full-height detail-page">
        <expressDetail :model="Model" @back="expressShow = false" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import productList from 'components/productList'
import expressDetail from 'views/purchase/expressDetail'
import { PurchaseOrderDetail } from 'api/purchase'
export default {
  components: {
    productList,
    expressDetail
  },
  data() {
    return {
      Model: {},
      totalPrice: 0,
      totalPay: 0,
      stateIcon: '',
      detailList: [],
      orderList: [
        { title: '供货商' },
        { title: '订单编号' },
        { title: '下单时间' },
        { title: '订货人' },
        { title: '发货人' }
      ],

      // 物流信息
      expressShow: false

    }
  },
  created() {
    this.PurchaseOrderDetail(this.$route.params.ordId)
  },
  methods: {
    showWuliu(state) {
      if (state !== 3 && state !== 5) {
        this.$toast('没有物流信息')
      } else {
        this.expressShow = true
        // 这里要显示物流信息
      }
    },

    // 获取订单详情
    PurchaseOrderDetail(ordId) {
      const _this = this
      PurchaseOrderDetail({ ordId }).then(res => {
        if (res) {
          _this.Model = res.Data || {}
          _this.stateIcon = require('@/assets/images/state-' + _this.Model.State + '.png')
          _this.detailList = _this.Model.DetailList || []
          if (_this.Model.DetailList && _this.Model.DetailList.length > 0) {
            _this.Model.DetailList.forEach(item => {
              _this.totalPrice += Number(item.Amount) * Number(item.Price)
            })
          }
          _this.totalPay = _this.totalPrice
          _this.orderList[0].value = _this.Model.PurchaseMemberName
          _this.orderList[1].value = _this.Model.OrderNo
          _this.orderList[2].value = _this.Model.AddTime
          _this.orderList[3].value = _this.Model.OrdNickName
          _this.orderList[4].value = _this.Model.SupplierNickName
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white {
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
  &:after{
    border-bottom:none;
  }
}
.page-content-box{
  position: relative;
  .stateIcon{
    position: absolute;
    width: 130px;
    height:82px;
    top: -5px;
    right: -0px;
    z-index: 0;
  }
}
.head-bg-box{
  height: 164px;
  border-radius: 0;
}
.left-line{
  position: relative;
  &:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 26px;
    @include bg-primary;
    left: 0;
    top: 28px;
  }
}
.btn{
  color: $colorF;
  line-height: 58px;
  border-radius: 29px;
  padding: 0 24px;
  margin-right: 24px;
}
.list-title{
  min-width: 100px;
  width: 170px;
  text-align: justify;
  text-align-last: justify;
}
</style>
